<template>
  <div class="main">
    <el-row>
      <el-col>
        <el-row>
          <el-col :span="16">
            <el-card class="box-card">
              <img :src="topic_list.topic_pic" alt="" />
              <h1>{{ topic_list.topic_title }}</h1>
              <p v-html="topic_list.topic_content"></p>
            </el-card>
            <topicComment></topicComment>
          </el-col>
          <el-col :span="8">
            <topicAuthor></topicAuthor>
            <recommendPanel></recommendPanel>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import topicAuthor from './topic_author'
import topicComment from './topic_comment'
import recommendPanel from '../_partials/recommend_panel'
export default {
  data () {
    return {
      id: this.$route.params.id,
      topic_list: {}
    }
  },
  created () {
    this.getClickTopic(this.id)
  },
  methods: {
    async getClickTopic (id) {
      const { data: res } = await this.$http.post('/topic_content', { topicId: id })
      this.topic_list = res
    }
  },
  components: {
    topicAuthor,
    topicComment,
    recommendPanel
  }
}
</script>

<style lang="less" scoped>
h1 {
  margin-top: 20px;
}

img {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
